html {
    scroll-behavior: smooth;
}

/* ══════════════════════════════════════════
   CSS Scroll Snap — Full-Page Scroll
══════════════════════════════════════════ */

/* حاوية التمرير: ثابتة تملأ الشاشة */
#fullpage {
    position: fixed;
    inset: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
}

/* كل قسم: يملأ الشاشة كاملاً كحد أدنى */
#fullpage .section {
    scroll-snap-align: start;
    min-height: 100vh;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* أقسام auto-height: تملأ الشاشة كحد أدنى، تنمو إن زاد المحتوى */
#fullpage .fp-auto-height {
    height: auto !important;
    min-height: 100vh !important;
    scroll-snap-align: start;
    overflow: visible;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

/* Hero */
#fullpage .hero-pro {
    height: 100vh !important;
    min-height: 100vh !important;
}

/* الخريطة */
#fullpage .interactive-map-section {
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 0 !important;
}

/* المنشآت والاعتمادات والأخبار المميزة */
#fullpage .ht-section,
#fullpage .ac-section,
#fullpage .featured-wrapper-section {
    height: 100vh !important;
    min-height: 100vh !important;
    justify-content: center;
}

/* الفوتر: ارتفاع تلقائي بدون min-height */
#fullpage .ft {
    height: auto !important;
    min-height: auto !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

/* على الجوال: scroll snap مع مرونة الارتفاع */
@media (max-width: 768px) {
    #fullpage {
        scroll-snap-type: y mandatory;
    }

    /* كل سكشن: ارتفاع تلقائي ولكن بحد أدنى 100svh */
    #fullpage .section,
    #fullpage .fp-auto-height {
        height: auto !important;
        min-height: 100svh !important;
        overflow: visible !important;   /* لا قطع للمحتوى */
        box-sizing: border-box;
        scroll-snap-align: start;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
    }

    /* الهيرو: ارتفاع ثابت 100svh بدون padding */
    #fullpage .hero-pro {
        height: 100svh !important;
        min-height: 100svh !important;
        overflow: hidden !important;
        padding-top: 0 !important;
    }

    /* تعويض الهيدر الثابت في كل سكشن (عدا الهيرو والخريطة) */
    #fullpage .section:not(.hero-pro):not(.interactive-map-section),
    #fullpage .fp-auto-height {
        padding-top: 76px !important;
    }

    /* الخريطة: top-bar يتكفل بالمسافة */
    #fullpage .interactive-map-section {
        height: 100svh !important;
        min-height: 100svh !important;
        overflow: hidden !important;
        padding-top: 0 !important;
    }
}

/* مساحة علوية للهيدر الثابت في الصفحات الداخلية */
body.inner-page {
    padding-top: 80px;
}

/* تعديلات خاصة للجوال لضمان عدم القص */
@media (max-width: 768px) {
    .hero-container {
        height: 50vh; /* تقليل الارتفاع ليناسب شاشة الجوال */
        min-height: 350px;
        border-bottom-left-radius: 40px; /* انحناء أقل حدة للموبايل */
        border-bottom-right-radius: 40px;
        background-position: 70% center; /* تحريك الصورة قليلاً لتظهر العناصر المهمة */
    }

    .hero-text h1 {
        font-size: 1.8rem !important; /* تصغير الخط لضمان عدم خروجه عن الشاشة */
        padding: 0 20px;
    }
}

.hero-text {
    z-index: 5;
    width: 100%;
}

/* --- الكروت المتداخلة --- */
.overlap-section {
    position: relative;
    margin-top: -100px;
    z-index: 100;
    padding-bottom: 60px;
}

.custom-card {
    background: white;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    transition: 0.3s;
    border: 1px solid rgba(0,0,0,0.03);
    height: 100%;
}

    .custom-card:hover {
        transform: translateY(-10px);
        border-color: #00A3E0;
    }

.card-content {
    text-align: right;
    flex-grow: 1;
    margin-right: 15px;
}

    .card-content h6 {
        color: #002D72;
        font-weight: 800;
        margin: 0;
    }

/* --- قسم الخدمات --- */
.services-section {
    background-color: #fbfcfd;
    padding: 80px 0;
}

.section-title {
    color: #002D72;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 50px;
    text-align: center;
}

    .section-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 4px;
        background: #00A3E0;
    }

.s-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px 20px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.03);
    transition: 0.4s;
    height: 100%;
}

    .s-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,45,114,0.06);
    }

.icon-box {
    width: 70px;
    height: 70px;
    background: #f0f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #00A3E0;
    font-size: 1.8rem;
}

/* --- قسم الأخبار (السلايدر) --- */
.news-section {
    padding: 50px 0 30px;
    background: radial-gradient(circle at top left, #f8fbff 0%, #ffffff 100%);
    position: relative;
}

    /* زخرفة خلفية بسيطة */
    .news-section::before {
        content: "NEWS";
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 10rem;
        font-weight: 900;
        color: rgba(0, 45, 114, 0.02);
        z-index: 0;
    }

.news-swiper {
    padding: 16px 10px 50px 10px !important;
}

/* الكرت الحديث */
.modern-news-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(0, 45, 114, 0.05);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 45, 114, 0.03);
}

    .modern-news-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 30px 60px rgba(0, 45, 114, 0.12);
        border-color: #00A3E0;
    }

/* حاوية الصورة مع الزوايا */
.img-container {
    position: relative;
    height: 190px;
    margin: 10px;
    border-radius: 16px;
    overflow: hidden;
}

    .img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

.modern-news-card:hover .img-container img {
    transform: scale(1.1) rotate(2deg);
}

/* ملصق التصنيف الزجاجي */
.category-badge {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    padding: 6px 18px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.news-body {
    padding: 8px 20px 22px 20px;
    text-align: right;
}

.news-date {
    font-size: 0.78rem;
    color: #00A3E0;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.news-body h5 {
    color: #002D72;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.45;
    margin-bottom: 10px;
    height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-body p {
    color: #6c757d;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 16px;
    height: 2.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* زر "اقرأ المزيد" بتصميم جديد */
.read-more-btn {
    display: inline-flex;
    align-items: center;
    color: #002D72;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: 0.3s;
}

    .read-more-btn i {
        margin-right: 8px;
        width: 30px;
        height: 30px;
        background: #f0f7ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        transition: 0.3s;
    }

.modern-news-card:hover .read-more-btn i {
    background: #00A3E0;
    color: white;
    transform: translateX(-5px);
}

/* تخصيص نقاط التنقل */
.swiper-pagination-bullet {
    width: 12px;
    height: 6px;
    border-radius: 3px;
    background: #cbd5e0;
    transition: all 0.3s;
}

.swiper-pagination-bullet-active {
    width: 30px;
    background: #00A3E0 !important;
}

/* منع تداخل العناصر قبل تحميل Swiper */
.swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    overflow-x: auto;
}

/* ═══════════════════════════════════════════════════
   سكشن الفعاليات — تصميم التذاكر
   ═══════════════════════════════════════════════════ */
.ev-section {
    padding: 52px 0 44px;
    background: linear-gradient(145deg, #f0f4fb 0%, #e8eef8 50%, #dfe8f4 100%);
    position: relative;
    overflow: hidden;
}

/* ── زخارف الخلفية ── */
.ev-bg-circles { position: absolute; inset: 0; pointer-events: none; }
.ev-bg-c1 {
    position: absolute; top: -100px; left: -100px;
    width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,163,224,.12) 0%, transparent 65%);
}
.ev-bg-c2 {
    position: absolute; bottom: -60px; right: 5%;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,45,114,.08) 0%, transparent 70%);
}
.ev-bg-cal {
    position: absolute; left: 3%; top: 50%; transform: translateY(-50%);
    width: 260px; height: 260px; opacity: .6;
}
.ev-bg-cal svg { width: 100%; height: 100%; }

/* ── الحاوية الداخلية ── */
.ev-inner { position: relative; z-index: 2; }

/* ── الهيدر ── */
.ev-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 14px;
}
.ev-header-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,163,224,.15);
    border: 1px solid rgba(0,163,224,.3);
    color: #00A3E0;
    border-radius: 50px;
    padding: 5px 14px;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.ev-header-title {
    font-size: 2rem; font-weight: 900;
    color: #002D72; margin: 0 0 6px;
    font-family: 'Cairo', sans-serif;
}
.ev-header-sub { color: #6b7a99; font-size: .9rem; margin: 0; }
.ev-all-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 24px;
    border: 1.5px solid rgba(0,45,114,.25);
    border-radius: 50px;
    color: #002D72;
    text-decoration: none;
    font-weight: 700; font-size: .88rem;
    transition: background .25s, border-color .25s, color .25s;
    white-space: nowrap;
}
.ev-all-btn:hover { background: #002D72; border-color: #002D72; color: #fff; }

/* ── قائمة التذاكر ── */
.ev-tickets {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── التذكرة ── */
.ev-ticket {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid rgba(0,45,114,.08);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    transition: box-shadow .3s, border-color .3s, transform .3s;
    position: relative;
    box-shadow: 0 4px 18px rgba(0,45,114,.06);
}
.ev-ticket:hover {
    box-shadow: 0 10px 32px rgba(0,45,114,.13);
    border-color: rgba(0,163,224,.4);
    transform: translateX(-4px);
}

/* لون الجانب الأيمن (accent) يتغير بالتسلسل */
.ev-ticket:nth-child(1) .ev-ticket-date { background: linear-gradient(160deg, #00A3E0, #0072a3); }
.ev-ticket:nth-child(2) .ev-ticket-date { background: linear-gradient(160deg, #002D72, #004db3); }
.ev-ticket:nth-child(3) .ev-ticket-date { background: linear-gradient(160deg, #00836f, #00b89e); }
.ev-ticket:nth-child(4) .ev-ticket-date { background: linear-gradient(160deg, #6a2ca0, #9246d6); }
.ev-ticket:nth-child(5) .ev-ticket-date { background: linear-gradient(160deg, #c05621, #f07833); }

/* جانب التاريخ */
.ev-ticket-date {
    min-width: 88px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 20px 14px;
    background: linear-gradient(160deg, #00A3E0, #0072a3);
    text-align: center;
    flex-shrink: 0;
}
.ev-t-day {
    display: block;
    font-size: 2.6rem; font-weight: 900; line-height: 1;
    color: #fff;
    font-family: 'Cairo', sans-serif;
}
.ev-t-mon {
    display: block;
    font-size: .72rem; font-weight: 700;
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 3px;
}
.ev-t-yr {
    display: block;
    font-size: .68rem;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
}

/* الفاصل المنقط (تأثير التذكرة) */
.ev-ticket-perf {
    width: 18px; flex-shrink: 0;
    position: relative;
    border-right: 2px dashed rgba(0,45,114,.12);
    margin: 0;
}
.ev-perf-notch {
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f0f4fb, #e8eef8);
    left: -9px;
}
.ev-perf-top { top: -9px; }
.ev-perf-bot { bottom: -9px; }

/* جسم التذكرة */
.ev-ticket-body {
    flex: 1;
    padding: 18px 22px;
    display: flex; flex-direction: column;
    justify-content: center;
    text-align: right;
}
.ev-t-tag {
    font-size: .72rem; font-weight: 700;
    color: rgba(0,163,224,.8);
    display: flex; align-items: center; gap: 5px;
    justify-content: flex-end;
    margin-bottom: 6px;
}
.ev-t-title {
    font-size: 1.05rem; font-weight: 800;
    color: #002D72; margin: 0 0 8px;
    font-family: 'Cairo', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ev-t-loc {
    font-size: .82rem; color: #8a96ad;
    display: flex; align-items: center; gap: 5px;
    justify-content: flex-end;
}
.ev-t-loc i { color: #00A3E0; }

/* سهم اليمين */
.ev-ticket-arrow {
    display: flex; align-items: center; padding: 0 18px;
    color: rgba(0,45,114,.2);
    font-size: .9rem;
    transition: color .25s, transform .25s;
}
.ev-ticket:hover .ev-ticket-arrow {
    color: #00A3E0;
    transform: translateX(-4px);
}

/* ── جوال ── */
@media (max-width: 767px) {
    .ev-section { padding: 32px 0 28px; }
    .ev-bg-cal  { display: none; }
    .ev-header  { flex-direction: column; align-items: flex-start; }
    .ev-header-title { font-size: 1.55rem; }
    .ev-ticket-date { min-width: 70px; padding: 16px 10px; }
    .ev-t-day   { font-size: 2rem; }
    .ev-ticket-body { padding: 14px 14px; }
    .ev-t-title { font-size: .92rem; }
}

/* حفظ أنماط قديمة قد تُستخدم في صفحات أخرى */
.events-section { padding: 90px 0; background-color: #ffffff; }

/* حاوية الحدث */
.event-item {
    display: flex;
    align-items: center;
    background: #fcfdfe;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 45, 114, 0.05);
    transition: all 0.4s ease;
    text-decoration: none !important;
}

/* --- سكشن الأجندة الحديث --- */
.events-modern-section {
    padding: 80px 0;
    background: #fcfdfe;
}

/* العنوان */
.section-header-styled {
    position: relative;
}

.header-line {
    width: 60px;
    height: 5px;
    background: #00A3E0;
    border-radius: 10px;
    margin-bottom: 15px;
    margin-left: auto;
}

.main-title {
    color: #002D72;
    font-weight: 900;
    font-size: 2.2rem;
    margin: 0;
}

.sub-title {
    color: #6c757d;
    font-size: 1.1rem;
}

.view-all-link {
    color: #00A3E0;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

    .view-all-link:hover {
        color: #002D72;
        transform: translateX(-5px);
    }

/* الكروت */
.events-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 950px;
    margin: 0 auto;
}

.modern-event-card {
    background: #fff;
    border-radius: 25px;
    border: 1px solid rgba(0, 45, 114, 0.04);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.card-inner-link {
    display: flex;
    align-items: center;
    padding: 20px 30px;
    text-decoration: none !important;
    flex-direction: row-reverse; /* ترتيب للعربي */
}

.modern-event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 45, 114, 0.08);
    border-color: #00A3E0;
}

/* تصميم التقويم الصغير */
.calendar-thumb {
    min-width: 100px;
    height: 110px;
    background: #f8fbff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #eef2f6;
    transition: 0.3s;
}

/* --- سكشن سلايدر الأحداث --- */
.events-slider-section {
    padding: 60px 0;
    background: #fff;
}

.events-swiper {
    padding: 20px 10px 60px 10px !important;
}

.event-card-horizontal {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

    .event-card-horizontal:hover {
        transform: translateY(-10px);
        border-color: #00A3E0;
        box-shadow: 0 20px 40px rgba(0, 45, 114, 0.1);
    }

.event-card-body {
    display: flex;
    flex-direction: row-reverse; /* ترتيب عربي */
    padding: 25px;
    align-items: center;
    gap: 20px;
}

.event-date-badge {
    background: linear-gradient(135deg, #002D72, #0056b3);
    color: white;
    min-width: 75px;
    height: 85px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .event-date-badge .day {
        font-size: 1.6rem;
        font-weight: 800;
        line-height: 1;
    }

    .event-date-badge .month {
        font-size: 0.8rem;
        text-transform: uppercase;
        margin-top: 5px;
        opacity: 0.9;
    }

.event-content-right {
    flex-grow: 1;
    text-align: right;
}

.event-title {
    color: #002D72;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8rem;
}

.event-meta-info {
    color: #6c757d;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

    .event-meta-info i {
        color: #00A3E0;
    }

.event-btn-link {
    color: #00A3E0;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
}

    .event-btn-link:hover {
        color: #002D72;
        gap: 10px;
    }

.all-events-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border: 1.5px solid #002D72;
    color: #002D72;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

    .all-events-btn:hover {
        background: #002D72;
        color: #fff;
    }

/* تخصيص الـ Pagination للأحداث */
.events-pagination .swiper-pagination-bullet-active {
    background: #002D72 !important;
}



/* ═══════════════════════════════════════════════════
   سكشن نموذج الرعاية — شوكيس سينمائي
   ═══════════════════════════════════════════════════ */
.care-models-section {
    padding: 44px 0 0;
    background: linear-gradient(170deg, #05112a 0%, #0a1f4e 60%, #0d2b64 100%);
    overflow: hidden;
    position: relative;
}
.care-models-section::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,163,224,.11) 0%, transparent 65%);
    pointer-events: none;
}
.care-models-section::after {
    content: '';
    position: absolute;
    bottom: 60px; left: -80px;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,45,114,.18) 0%, transparent 70%);
    pointer-events: none;
}

/* عنوان السكشن */
.cm-section-header h2 { color: #fff !important; }
.cm-section-header p  { color: rgba(255,255,255,.55) !important; }

/* ── الشوكيس (ديسكتوب فقط) ── */
.cm-showcase { padding-bottom: 36px; }

/* الـ Stage — اللوحة الكبيرة */
.cm-stage {
    position: relative;
    height: 430px;
    margin-bottom: 14px;
    overflow: hidden;
}

/* كل شريحة */
.cm-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .85s ease;
    pointer-events: none;
    z-index: 0;
}
.cm-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* صورة الخلفية مع zoom بطيء */
.cm-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.07);
    transition: transform 7s ease;
}
.cm-slide.active .cm-slide-bg { transform: scale(1); }

/* طبقة التلاشي — داكنة على اليمين (جانب النص) */
.cm-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to left,
        rgba(5,17,42,.97) 0%,
        rgba(5,17,42,.78) 28%,
        rgba(5,17,42,.28) 56%,
        transparent 74%
    );
}

/* جسم الشريحة */
.cm-slide-body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 5%;
}
.cm-slide-content {
    max-width: 44%;
    text-align: right;
}

/* الرقم الكبير الشفاف */
.cm-slide-num {
    display: block;
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(0,163,224,.2);
    margin-bottom: -22px;
    font-family: 'Cairo', sans-serif;
    letter-spacing: -6px;
    user-select: none;
}

/* اسم النموذج */
.cm-slide-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    font-family: 'Cairo', sans-serif;
    line-height: 1.35;
}

/* الوصف */
.cm-slide-desc {
    font-size: .9rem;
    line-height: 1.85;
    color: rgba(255,255,255,.72);
    margin-bottom: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* زر الاستكشاف */
.cm-slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    background: #00A3E0;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
    transition: background .25s, transform .25s;
}
.cm-slide-btn:hover { background: #006fa3; color: #fff; transform: translateX(-4px); }

/* ── شريط التابات ── */
.cm-tabs-bar {
    display: flex;
    gap: 10px;
}
.cm-tab {
    flex: 1;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    text-align: right;
    transition: background .25s, border-color .25s;
}
.cm-tab:hover  { background: rgba(255,255,255,.12); }
.cm-tab.active { background: rgba(0,163,224,.18); border-color: rgba(0,163,224,.55); }

.cm-tab-thumb {
    width: 100%;
    height: 58px;
    background-size: cover;
    background-position: center;
    filter: brightness(.6);
    transition: filter .3s;
}
.cm-tab.active .cm-tab-thumb { filter: brightness(.88); }

.cm-tab-lbl {
    display: block;
    padding: 7px 10px 5px;
    font-size: .77rem;
    font-weight: 700;
    color: rgba(255,255,255,.72);
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-tab.active .cm-tab-lbl { color: #fff; }

.cm-tab-progress { height: 3px; background: rgba(255,255,255,.1); margin-top: 2px; }
.cm-tab-fill     { height: 100%; width: 0; background: #00A3E0; }

/* ── الكروت القديمة (للجوال فقط الآن) ── */
.model-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,45,114,.9) 0%, rgba(0,45,114,.4) 50%, transparent 100%);
    display: flex; align-items: flex-end; padding: 30px; border-radius: 20px;
}
.model-content  { color: white; width: 100%; text-align: right; }
.model-icon {
    width: 50px; height: 50px;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 15px;
}
.model-title       { font-weight: 800; font-size: 1.5rem; margin-bottom: 15px; white-space: nowrap; }
.model-description { max-height: 0; opacity: 0; overflow: hidden; transition: all .4s ease; transform: translateY(20px); }
.model-description p { font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.9); }
.btn-read-more {
    display: inline-block; margin-top: 15px; color: #00A3E0;
    text-decoration: none; font-weight: 700; background: white;
    padding: 8px 20px; border-radius: 50px; font-size: .85rem; transition: .3s;
}
.btn-read-more:hover { background: #00A3E0; color: white; }

/* ── الشوكيس على الجوال ── */
@media (max-width: 767px) {
    .care-models-section { padding: 28px 0 0; }

    .cm-stage { height: 360px; }

    /* التدرج الداكن يأتي من الأسفل للجوال (المحتوى أسفل الصورة) */
    .cm-slide-overlay {
        background: linear-gradient(
            to top,
            rgba(5,17,42,.97) 0%,
            rgba(5,17,42,.82) 38%,
            rgba(5,17,42,.35) 62%,
            transparent 80%
        );
    }

    /* المحتوى في الأسفل */
    .cm-slide-body { align-items: flex-end; padding: 0 0 18px; }
    .cm-slide-content {
        max-width: 100%;
        padding: 0 18px;
        text-align: right;
    }

    .cm-slide-num   { font-size: 3.5rem; margin-bottom: -12px; }
    .cm-slide-title { font-size: 1.2rem; margin-bottom: 6px; }
    .cm-slide-desc  { font-size: .82rem; -webkit-line-clamp: 2; margin-bottom: 12px; }
    .cm-slide-btn   { padding: 9px 20px; font-size: .82rem; }

    /* التابات: قابلة للتمرير أفقياً */
    .cm-tabs-bar {
        gap: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cm-tabs-bar::-webkit-scrollbar { display: none; }

    .cm-tab {
        flex: 0 0 110px;
        min-width: 110px;
    }
    .cm-tab-thumb { height: 46px; }
    .cm-tab-lbl   { font-size: .72rem; padding: 5px 8px 4px; }
}



/* ===== شريط المنشآت — الأنماط موجودة في Default.aspx مباشرة ===== */
.hospitals-ticker-section {
    padding: 80px 0 70px;
    background: linear-gradient(135deg, #001a4d 0%, #002D72 55%, #003d99 100%) !important;
    overflow: hidden;
    position: relative;
}

.hospitals-ticker-title {
    color: #fff !important;
    font-size: 2rem;
}

.hospitals-ticker-sub {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1rem;
}

/* صف التيكر */
.ticker-row-wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 8px 0;
}

/* تلاشي الحواف */
.ticker-row-wrap::before,
.ticker-row-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 3;
    pointer-events: none;
}

.ticker-row-wrap::before {
    right: 0;
    background: linear-gradient(to left, #001a4d 40%, transparent);
}

.ticker-row-wrap::after {
    left: 0;
    background: linear-gradient(to right, #001a4d 40%, transparent);
}

/* المسار المتحرك — صف أفقي لا ينكسر */
.ticker-track {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    animation: tickerScrollLtr 40s linear infinite;
    padding: 8px 0;
    will-change: transform;
}

.ticker-track--reverse {
    animation: tickerScrollRtl 40s linear infinite;
}

.ticker-row-wrap:hover .ticker-track {
    animation-play-state: paused;
}

@keyframes tickerScrollLtr {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes tickerScrollRtl {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* كرت اللوجو */
.ticker-card {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    text-decoration: none !important;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    vertical-align: top;
    box-sizing: border-box;
    transition: background 0.3s, transform 0.3s, border-color 0.3s;
}

.ticker-card:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-5px);
    text-decoration: none !important;
}

/* دائرة اللوجو — محدودة الحجم دائماً */
.ticker-logo-wrap {
    width: 75px !important;
    height: 75px !important;
    min-width: 75px;
    min-height: 75px;
    background: #ffffff;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.ticker-logo-wrap img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: contain;
    display: block;
}

.ticker-hosp-name {
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    width: 100%;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}



/* ══════════════════════════════════════════════════════════
   FEATURED NEWS — Newspaper Style + Page Flip
   ══════════════════════════════════════════════════════════ */

/* ══ خلفية القسم: رمادي فاتح مع أشكال زرقاء باهتة ══ */
.featured-wrapper-section {
    padding: 36px 0 24px;
    overflow: hidden !important;
    position: relative;
    background: linear-gradient(160deg, #f2f5fb 0%, #eaeff8 100%);
}

/* أشكال زخرفية باهتة */
.featured-wrapper-section::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,45,114,.07) 0%, transparent 70%);
    pointer-events: none;
}
.featured-wrapper-section::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,163,224,.06) 0%, transparent 70%);
    pointer-events: none;
}

/* خطوط رفيعة تلميح للأخبار */
.featured-wrapper-section .container {
    position: relative;
    z-index: 1;
}

/* ── رأس القسم بشكل جريدة ── */
.fn-newspaper-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.fn-nh-rule {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #002D72 40%, #002D72 60%, transparent);
    opacity: .30;
}
.fn-nh-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 0 18px;
}
.fn-nh-icon {
    font-size: 1.3rem;
    color: #002D72;
    opacity: .65;
}
.fn-nh-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #001845;
    margin: 0;
    letter-spacing: -.5px;
    line-height: 1.1;
}
.fn-nh-sub {
    font-size: .68rem;
    color: #5577aa;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ══ السلايدر الخارجي — هو الـ positioning context للأزرار ══ */
.fn-slider-outer {
    position: relative;
    width: 100%;          /* إصلاح العرض صفر في flex column */
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 48px;
    align-self: stretch;  /* يمتد بالكامل داخل flex */
}

/* ══ السلايدر الداخلي (Swiper) ══ */
.fn-slider {
    position: relative;
    width: 100%;
}
.fn-slider .swiper-wrapper {
    width: 100%;
}
.fn-slider .swiper-slide {
    width: 100% !important;
    display: flex;
    justify-content: center;
}

/* ══════════════════════════════════════════
   كرت الخبر — تصميم سينمائي غامر (مبسّط)
   ══════════════════════════════════════════ */
.fn-paper-card {
    width: 100%;
    max-width: 100%;
    position: relative;
    height: 500px;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    /* خلفية احتياطية على الكرت نفسه — تضمن الظهور حتى لو فشلت الصورة */
    background: linear-gradient(135deg, #000e28 0%, #002060 100%);
    box-shadow:
        0 4px 16px rgba(0,0,0,.10),
        0 20px 60px rgba(0,10,40,.22);
    transition: transform .5s cubic-bezier(.25,1,.5,1), box-shadow .5s;
}
.fn-paper-card:hover {
    transform: translateY(-7px);
    box-shadow:
        0 10px 28px rgba(0,0,0,.16),
        0 36px 80px rgba(0,10,40,.28);
}

/* ── الصورة تملأ الكرت بالكامل ── */
.fn-paper-image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    overflow: hidden;
}
.fn-paper-image img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 1.2s cubic-bezier(.25,1,.5,1);
}
.fn-paper-card:hover .fn-paper-image img { transform: scale(1.06); }

/* تدرج مزدوج: داكن أعلى (masthead) + داكن أسفل (محتوى) */
.fn-paper-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg,
        rgba(0,4,18,.82)  0%,
        rgba(0,4,18,.08) 30%,
        rgba(0,4,18,.05) 50%,
        rgba(0,4,18,.72) 68%,
        rgba(0,4,18,.97) 100%);
    pointer-events: none;
}

/* ── Masthead — أعلى الكرت ── */
.fn-paper-masthead {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between;
}
.fn-pm-brand {
    display: flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,.92); font-size: .86rem; font-weight: 700;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.fn-pm-star { color: #D4A820; font-size: .80rem; }
.fn-pm-badge {
    background: rgba(0,0,0,.30); color: #ffd060;
    border: 1px solid rgba(212,168,32,.50);
    padding: 5px 15px; border-radius: 50px;
    font-size: .70rem; font-weight: 700; letter-spacing: .5px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* ── المحتوى — أسفل الكرت ── */
.fn-paper-content {
    position: absolute;
    bottom: 0; left: 0; right: 0; z-index: 3;
    padding: 0 24px 24px;
}
.fn-paper-title {
    font-size: 1.65rem; font-weight: 900;
    color: #fff; line-height: 1.45; margin: 0 0 14px;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
    word-break: break-word;
}
.fn-paper-rule {
    width: 80px; height: 3px; border: none;
    background: linear-gradient(to left, #D4A820, #f7e07a, rgba(212,168,32,.15));
    margin-bottom: 12px; border-radius: 2px;
}
.fn-paper-body {
    color: rgba(255,255,255,.76); font-size: .92rem;
    line-height: 1.75; margin: 0 0 18px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.fn-paper-footer {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
}
.fn-img-date {
    display: flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,.58); font-size: .76rem; font-weight: 600;
}
/* زر glass pill */
.fn-paper-read {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.13); color: #fff;
    border: 1.5px solid rgba(255,255,255,.28);
    border-radius: 50px; padding: 9px 22px;
    font-size: .86rem; font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: .3s; white-space: nowrap;
}
.fn-paper-read:hover {
    background: rgba(212,168,32,.85);
    border-color: #D4A820; color: #000e28;
}
.fn-paper-read i { font-size: .78rem; transition: transform .3s; }
.fn-paper-read:hover i { transform: translateX(-4px); }

.fn-paper-fold { display: none; }

/* ── أزرار التنقل — خارج Swiper، داخل fn-slider-outer ── */
.fn-page-btn {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    color: #002D72;
    border: 1.5px solid #c8d8ec;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,45,114,.14);
    transition: .25s;
    user-select: none;
}
.fn-page-btn:hover {
    background: #002D72;
    color: #fff;
    border-color: #002D72;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 20px rgba(0,45,114,.22);
}
/* السابق — يسار الكرت */
.fn-page-next {
    left: 0;
    transform: translate(-130%, -50%);
}
.fn-page-next:hover {
    transform: translate(-130%, -50%) scale(1.08);
}
/* التالي — يمين الكرت */
.fn-page-prev {
    right: 0;
    transform: translate(130%, -50%);
}
.fn-page-prev:hover {
    transform: translate(130%, -50%) scale(1.08);
}

/* ── نقاط التنقل — أسفل الكرت بمسافة ── */
.fn-pagination {
    position: relative !important;
    margin-top: 14px !important;
    text-align: center !important;
    width: 100% !important;
    transform: none !important;
    bottom: auto !important;
    left: auto !important;
}
.fn-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: #a8bcd4;
    opacity: 1;
    border-radius: 3px;
    transition: .3s;
}
.fn-pagination .swiper-pagination-bullet-active {
    background: #002D72;
    width: 28px;
    border-radius: 4px;
}

/* ── رابط عرض الكل ── */
.fn-all-wrap { text-align: center; margin-top: 6px; }
.fn-all-btn {
    display: inline-flex; align-items: center; gap: 7px;
    color: #002D72; font-weight: 700; font-size: .88rem;
    text-decoration: none; transition: gap .25s;
    border-bottom: 2px dotted rgba(0,45,114,.28);
    padding-bottom: 2px;
}
.fn-all-btn:hover { gap: 14px; color: #00A3E0; border-color: #00A3E0; }

/* ── موبايل ── */
@media (max-width: 768px) {
    .featured-wrapper-section { padding: 20px 0 10px !important; }
    .fn-newspaper-head { margin-bottom: 10px; }
    .fn-nh-title { font-size: 1.2rem; }

    .fn-slider-outer { padding-bottom: 38px; width: 100%; max-width: 100%; overflow: hidden; }
    .fn-slider { overflow: hidden; width: 100%; }

    .fn-paper-card { height: 400px; border-radius: 12px; }
    .fn-paper-masthead { padding: 14px 16px; }
    .fn-pm-brand { font-size: .80rem; }
    .fn-paper-content { padding: 0 16px 18px; }
    .fn-paper-title { font-size: 1.1rem; margin-bottom: 10px; }
    .fn-paper-rule { margin-bottom: 10px; }
    .fn-paper-body { font-size: .86rem; -webkit-line-clamp: 2; margin-bottom: 14px; }
    .fn-paper-read { padding: 7px 16px; font-size: .80rem; }
    .fn-img-date { font-size: .70rem; }
    .fn-page-btn { display: none; }
}


/* ملصق التصنيف */
.category-pill {
    display: inline-block;
    background: #00A3E0;
    color: white;
    padding: 5px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* الزر الحديث */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    color: #002D72;
    padding: 12px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s all ease;
}

    .action-btn:hover {
        background: #00A3E0;
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 163, 224, 0.3);
    }

/* تحسين الخطوط لتناسب الحجم الأصغر */
.main-title {
    font-size: 2.2rem; /* أصغر قليلاً لتناسب السكشن */
    font-weight: 800;
}

.main-summary {
    font-size: 1.1rem;
    opacity: 0.95;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* يمنع النص من تجاوز 3 أسطر */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* أزرار التنقل */
.floating-nav {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
    width: 45px !important;
    height: 45px !important;
    border-radius: 50%;
    backdrop-filter: blur(5px);
}

    .floating-nav:after {
        font-size: 1rem !important;
    }

/* النقاط أسفل الكرت */
.floating-dots {
    bottom: 25px !important;
}

    .floating-dots .swiper-pagination-bullet {
        background: #fff !important;
    }


/* السكشن العام */
/* ═══════════════════════════════════════════════════════════
   قسم الاعتمادات — Premium Light Design
═══════════════════════════════════════════════════════════ */

.ac-section {
    padding: 88px 0 80px;
    background: #f0f4f8;
    position: relative;
    overflow: hidden;
}

/* ── أيقونات خلفية متحركة (شفافة زرقاء) ── */
.ac-bg-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.ac-bg-icon {
    position: absolute;
    color: rgba(0,163,224,.10);
    animation: ac-float linear infinite;
    line-height: 1;
}
/* مواضع + أحجام كل أيقونة */
.ac-bg-icon:nth-child(1)  { font-size: 56px; top: 8%;  left: 4%;  animation-duration: 14s; animation-delay: 0s; }
.ac-bg-icon:nth-child(2)  { font-size: 40px; top: 60%; left: 2%;  animation-duration: 18s; animation-delay: -4s; }
.ac-bg-icon:nth-child(3)  { font-size: 70px; top: 20%; left: 14%; animation-duration: 22s; animation-delay: -2s; }
.ac-bg-icon:nth-child(4)  { font-size: 34px; top: 75%; left: 18%; animation-duration: 16s; animation-delay: -7s; }
.ac-bg-icon:nth-child(5)  { font-size: 50px; top: 5%;  left: 38%; animation-duration: 20s; animation-delay: -1s; }
.ac-bg-icon:nth-child(6)  { font-size: 42px; top: 80%; left: 45%; animation-duration: 24s; animation-delay: -9s; }
.ac-bg-icon:nth-child(7)  { font-size: 62px; top: 15%; right: 14%;animation-duration: 17s; animation-delay: -3s; }
.ac-bg-icon:nth-child(8)  { font-size: 36px; top: 70%; right: 8%; animation-duration: 21s; animation-delay: -6s; }
.ac-bg-icon:nth-child(9)  { font-size: 48px; top: 40%; right: 3%; animation-duration: 19s; animation-delay: -5s; }
.ac-bg-icon:nth-child(10) { font-size: 30px; top: 50%; left: 28%; animation-duration: 15s; animation-delay: -8s; }
.ac-bg-icon:nth-child(11) { font-size: 44px; top: 30%; right: 28%;animation-duration: 23s; animation-delay: -2s; }
.ac-bg-icon:nth-child(12) { font-size: 38px; top: 88%; right: 22%;animation-duration: 12s; animation-delay: -10s;}

@keyframes ac-float {
    0%   { transform: translateY(0)   rotate(0deg)   scale(1); }
    33%  { transform: translateY(-18px) rotate(6deg)  scale(1.05); }
    66%  { transform: translateY(-8px)  rotate(-4deg) scale(.97); }
    100% { transform: translateY(0)   rotate(0deg)   scale(1); }
}

/* ── العنوان الفوقي (eyebrow) ── */
.ac-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #00A3E0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .8px;
    margin-bottom: 14px;
}
.ac-eyebrow-dot {
    width: 6px; height: 6px;
    background: #00A3E0;
    border-radius: 50%;
    display: inline-block;
}

/* ── العنوان الرئيسي ── */
.ac-title {
    color: #002D72;
    font-size: clamp(1.9rem, 3.5vw, 2.7rem);
    font-weight: 800;
    margin-bottom: 0;
    line-height: 1.25;
}
.ac-title em {
    font-style: normal;
    color: #00A3E0;
    position: relative;
}
.ac-title em::after {
    content: '';
    position: absolute;
    bottom: -2px; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, #00A3E0, transparent);
    border-radius: 2px;
}

/* فاصل تحت العنوان */
.ac-title-rule {
    width: 52px; height: 3px;
    background: linear-gradient(90deg, #00A3E0, #003f7f);
    border-radius: 3px;
    margin: 16px auto;
}

.ac-subtitle {
    color: #6b7a8d;
    font-size: .98rem;
    margin: 0;
}

/* ── شبكة بطاقات الاعتمادات ── */
.ac-cards-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    padding-bottom: 12px;
}

/* البطاقة */
.ac-card {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #dce8f5;
    padding: 36px 32px 30px;
    width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: transform .38s cubic-bezier(.34,1.56,.64,1),
                box-shadow .38s ease,
                border-color .3s ease;
    box-shadow: 0 3px 16px rgba(0,45,114,.06);
}

/* توهج يظهر عند hover */
.ac-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 220px 160px at 50% 0%,
                rgba(0,163,224,.09) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.ac-card:hover .ac-card-glow { opacity: 1; }

.ac-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 22px 52px rgba(0,163,224,.18),
                0 6px 18px rgba(0,45,114,.08);
    border-color: rgba(0,163,224,.35);
}

/* شارة "معتمد" */
.ac-card-top {
    align-self: flex-end;
    margin-bottom: 18px;
}
.ac-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,163,224,.08);
    color: #00A3E0;
    border: 1px solid rgba(0,163,224,.22);
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    transition: background .3s, color .3s;
}
.ac-card:hover .ac-card-badge {
    background: #00A3E0;
    color: #fff;
}

/* منطقة الشعار */
.ac-card-logo {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}
.ac-card-logo img {
    max-height: 84px;
    max-width: 160px;
    object-fit: contain;
    transition: transform .38s ease;
}
.ac-card:hover .ac-card-logo img {
    transform: scale(1.08);
}

/* اسم الاعتماد */
.ac-card-name {
    font-size: .88rem;
    font-weight: 700;
    color: #3a4f66;
    text-align: center;
    transition: color .3s ease;
    margin-bottom: 18px;
}
.ac-card:hover .ac-card-name { color: #00A3E0; }

/* خط أسفل البطاقة */
.ac-card-line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00A3E0, #003f7f);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .38s ease;
    border-radius: 0 0 22px 22px;
}
.ac-card:hover .ac-card-line { transform: scaleX(1); }

/* ── سلايدر الاعتمادات — جوال ── */
.ac-swiper-wrap {
    padding: 0 0 50px;
    position: relative;
}
.ac-swiper {
    width: 100%;
    padding: 8px 0 0 !important;
}
.ac-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    height: auto;
}
.ac-swiper .ac-card {
    width: 260px;
    max-width: 88vw;
}
.ac-pagination .swiper-pagination-bullet {
    background: rgba(30,154,215,.3) !important;
    opacity: 1 !important;
    width: 7px !important;
    height: 7px !important;
}
.ac-pagination .swiper-pagination-bullet-active {
    background: #1E9AD7 !important;
    width: 22px !important;
    border-radius: 4px !important;
}




/* ═══════════════════════════════════════════════════
   سكشن الخدمات الإلكترونية — Launch Pad
   ═══════════════════════════════════════════════════ */

/* ألوان خاصة بكل خدمة عبر --idx */
.svc-module:nth-child(1) { --ac: #00A3E0; --ac2: #0072a3; }
.svc-module:nth-child(2) { --ac: #6c3bda; --ac2: #4a25a0; }
.svc-module:nth-child(3) { --ac: #00a878; --ac2: #007355; }
.svc-module:nth-child(4) { --ac: #e06b00; --ac2: #a34c00; }
.svc-module:nth-child(5) { --ac: #d63b6e; --ac2: #a02050; }

.svc-section {
    padding: 52px 0 60px;
    background: linear-gradient(160deg, #06101f 0%, #0b1a38 55%, #0d2050 100%);
    position: relative;
    overflow: hidden;
}

/* ── زخارف الخلفية ── */
.svc-bg { position: absolute; inset: 0; pointer-events: none; }
.svc-glow-1 {
    position: absolute; top: -140px; right: -100px;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,163,224,.1) 0%, transparent 65%);
}
.svc-glow-2 {
    position: absolute; bottom: -80px; left: 10%;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(108,59,218,.08) 0%, transparent 65%);
}
.svc-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* ── الحاوية ── */
.svc-inner { position: relative; z-index: 2; }

/* ── الهيدر ── */
.svc-header {
    display: flex; align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 52px;
    flex-wrap: wrap; gap: 16px;
}
.svc-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,163,224,.15);
    border: 1px solid rgba(0,163,224,.3);
    color: #00A3E0; border-radius: 50px;
    padding: 5px 14px; font-size: .78rem; font-weight: 700;
    margin-bottom: 10px;
}
.svc-title {
    font-size: 2.2rem; font-weight: 900; color: #fff;
    margin: 0 0 6px; font-family: 'Cairo', sans-serif; line-height: 1.2;
}
.svc-sub { color: rgba(255,255,255,.45); font-size: .9rem; margin: 0; }
.svc-all-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 26px;
    border: 1.5px solid rgba(255,255,255,.18);
    border-radius: 50px; color: rgba(255,255,255,.75);
    text-decoration: none; font-weight: 700; font-size: .88rem;
    transition: background .25s, border-color .25s, color .25s;
    white-space: nowrap;
}
.svc-all-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; }

/* ══ Launch Pad ══ */
.svc-pad {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0;
}

/* الخط الرابط الأفقي */
.svc-connector-line {
    position: absolute;
    top: 52px; /* مركز الأيقونة */
    left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(
        to left,
        transparent 0%,
        rgba(255,255,255,.08) 15%,
        rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.08) 85%,
        transparent 100%
    );
    z-index: 0;
}

/* ── كل Module ── */
.svc-module {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    padding: 0 10px 28px;
    position: relative;
    z-index: 1;
    transition: transform .35s ease;
}
.svc-module:hover { transform: translateY(-10px); }

/* الرقم الكبير الشفاف فوق الكرت */
.svc-module-num {
    display: block;
    font-size: 5rem; font-weight: 900; line-height: 1;
    color: rgba(255,255,255,.04);
    font-family: 'Cairo', sans-serif;
    letter-spacing: -4px;
    user-select: none;
    margin-bottom: -28px; /* يتداخل مع الأيقونة */
    transition: color .35s;
}
.svc-module:hover .svc-module-num { color: rgba(255,255,255,.08); }

/* نقطة الاتصال على الخط */
.svc-module-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ac, #00A3E0);
    box-shadow: 0 0 10px var(--ac, #00A3E0);
    position: absolute;
    top: 47px; /* مركز الخط */
    left: 50%; transform: translateX(-50%);
    z-index: 2;
    transition: transform .35s, box-shadow .35s;
}
.svc-module:hover .svc-module-dot {
    transform: translateX(-50%) scale(1.6);
    box-shadow: 0 0 22px var(--ac, #00A3E0);
}

/* ── الأيقونة (تطفو فوق الكرت) ── */
.svc-module-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ac, #00A3E0), var(--ac2, #0072a3));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.06);
    position: relative; z-index: 3;
    transition: box-shadow .35s, transform .35s;
    margin-bottom: -22px; /* تتداخل مع جسم الكرت */
}
.svc-module:hover .svc-module-icon {
    box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.1), 0 0 40px var(--ac, #00A3E0);
    transform: scale(1.08);
}

/* ── جسم الكرت ── */
.svc-module-body {
    width: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 34px 16px 20px;
    display: flex; flex-direction: column;
    align-items: center; gap: 12px;
    transition: background .35s, border-color .35s;
    position: relative; z-index: 2;
}
.svc-module:hover .svc-module-body {
    background: rgba(255,255,255,.08);
    border-color: var(--ac, #00A3E0);
}

/* شريط ملون سفلي */
.svc-module-body::after {
    content: '';
    position: absolute; bottom: 0; left: 20%; right: 20%;
    height: 3px; border-radius: 0 0 20px 20px;
    background: linear-gradient(to left, var(--ac2, #0072a3), var(--ac, #00A3E0));
    opacity: 0;
    transition: opacity .35s, left .35s, right .35s;
}
.svc-module:hover .svc-module-body::after {
    opacity: 1; left: 0; right: 0;
}

.svc-module-name {
    font-size: .92rem; font-weight: 800;
    color: #fff; line-height: 1.4;
    font-family: 'Cairo', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.svc-module-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .75rem; font-weight: 700;
    color: var(--ac, #00A3E0);
    opacity: 0; transform: translateY(6px);
    transition: opacity .3s, transform .3s;
}
.svc-module:hover .svc-module-cta { opacity: 1; transform: translateY(0); }

/* ── جوال: تمرير أفقي ── */
@media (max-width: 767px) {
    .svc-section { padding: 32px 0 40px; }
    .svc-header   { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
    .svc-title    { font-size: 1.6rem; }
    .svc-pad      { gap: 0; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding-bottom: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .svc-pad::-webkit-scrollbar { display: none; }
    .svc-connector-line { display: none; }
    .svc-module   { flex: 0 0 148px; min-width: 148px; }
    .svc-module-icon { width: 68px; height: 68px; font-size: 1.5rem; }
    .svc-module-num { font-size: 3.5rem; margin-bottom: -22px; }
    .svc-module-name { font-size: .82rem; }
}

/* حفظ أنماط قديمة --%>
.services-modern-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, #00458e 0%, #002d72 100%);
    overflow: hidden;
    color: #fff;
}

/* ══ سلايدر الخدمات (جوال) ══ */
.services-swiper-wrap {
    padding: 0 8px 50px;
    position: relative;
    overflow: hidden;
}
.services-swiper {
    width: 100%;
    overflow: visible;
}
.services-swiper .swiper-wrapper {
    align-items: stretch;
}
.services-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    height: auto;
}
.services-swiper .glass-service-card {
    width: 100%;
    max-width: 280px;
}
.services-pagination {
    bottom: 10px !important;
}
.services-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,.5);
    opacity: 1;
}
.services-pagination .swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.3);
}

/* ══ سلايدر نماذج الرعاية (جوال) ══ */
.models-swiper-wrap {
    padding: 0 8px 55px;
    position: relative;
    overflow: hidden;
}
.models-swiper {
    width: 100%;
    overflow: visible;
}
.models-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    height: auto;
}
.model-card-mobile {
    width: 100%;
    height: 320px;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.model-card-mobile .model-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,45,114,.9) 0%, rgba(0,45,114,.3) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 24px 20px;
    border-radius: 20px;
}
.model-card-mobile .model-content {
    color: #fff;
    width: 100%;
}
.model-card-mobile .model-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.model-card-mobile .model-description p {
    font-size: .85rem;
    opacity: .85;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.model-card-mobile .model-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(30,154,215,.35);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    font-size: .95rem;
}
.models-pagination {
    bottom: 10px !important;
}
.models-pagination .swiper-pagination-bullet {
    background: rgba(0,45,114,.35);
    opacity: 1;
}
.models-pagination .swiper-pagination-bullet-active {
    background: #002D72;
    transform: scale(1.3);
}

/* حاوية الخطوط المتحركة */
.geometric-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* إنشاء نمط خطوط متقاطعة (Grid) باستخدام CSS */
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse at center, black, transparent 80%);
}

    /* تأثير الخطوط المتدرجة المتحركة باللون الأبيض */
    .geometric-bg::before {
        content: "";
        position: absolute;
        top: -100%;
        left: -100%;
        right: -100%;
        bottom: -100%;
        background: repeating-linear-gradient( 45deg, transparent, transparent 100px, rgba(255, 255, 255, 0.03) 100px, rgba(255, 255, 255, 0.03) 200px );
        animation: moveLines 20s linear infinite;
        z-index: -1;
    }

/* حركة الخطوط */
@keyframes moveLines {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100px);
    }
}

/* إضافة "شطبات" ضوئية بيضاء متحركة (أشعة) */
.shape {
    position: absolute;
    width: 2px;
    height: 150px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4), transparent);
    opacity: 0;
    animation: rainLines 5s infinite ease-in;
    z-index: 1;
}

.shape-1 {
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    left: 40%;
    animation-delay: 2s;
}

.shape-3 {
    left: 80%;
    animation-delay: 4s;
}

@keyframes rainLines {
    0% {
        top: -20%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        top: 120%;
        opacity: 0;
    }
}

/* كروت الزجاج: جعلها أكثر شفافية لتمر الخطوط خلفها */
/* كروت الزجاج (Glassmorphism) */
.glass-service-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    transition: 0.4s;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .glass-service-card:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-10px);
        border-color: #00A3E0;
    }

.icon-wrapper {
    width: 70px;
    height: 70px;
    background: rgba(0, 163, 224, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #00A3E0;
    margin-bottom: 20px;
    transition: 0.4s;
}

.glass-service-card:hover .icon-wrapper {
    background: #00A3E0;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 163, 224, 0.5);
}

.glass-service-card h5 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.glass-btn {
    text-decoration: none;
    color: #fff;
    font-size: 0.8rem;
    padding: 8px 15px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: 0.3s;
}

    .glass-btn:hover {
        background: #00A3E0;
        color: #fff;
    }

/* زر المزيد من خدماتنا */
.btn-more-services {
    display: inline-block;
    padding: 12px 35px;
    background: transparent;
    border: 2px solid #00A3E0;
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    transition: 0.3s;
    text-decoration: none;
}

    .btn-more-services:hover {
        background: #00A3E0;
        box-shadow: 0 10px 20px rgba(0, 163, 224, 0.3);
        color: #fff;
    }

.section-title-modern {
    font-weight: 800;
    font-size: 2.5rem;
}

.title-underline {
    width: 80px;
    height: 4px;
    background: #00A3E0;
    margin: 15px auto;
    border-radius: 10px;
}


/* ═══════════════════════════════════════
   FOOTER — Premium Design
   ═══════════════════════════════════════ */

.ft {
    background: #020d1f;
    color: #fff;
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

/* نمط نقاط خفيف في الخلفية */
.ft::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* دائرة ضوء في الخلفية */
.ft::after {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,45,114,.35) 0%, transparent 70%);
    pointer-events: none;
}

/* ── الشريط العلوي ── */
.ft-top-bar {
    background: linear-gradient(135deg, #002D72, #0051cc);
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

.ft-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ft-top-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
}
.ft-top-text i { color: #f87171; animation: ft-pulse 1.6s ease-in-out infinite; }
@keyframes ft-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }

/* أزرار السوشيال */
.ft-social { display: flex; gap: 8px; }
.ft-social-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    text-decoration: none;
    transition: all .25s;
    border: 1px solid rgba(255,255,255,.15);
}
.ft-social-btn:hover {
    background: #00A3E0;
    border-color: #00A3E0;
    color: #fff;
    transform: translateY(-3px);
}

/* ── المحتوى الرئيسي ── */
.ft-main {
    padding: 22px 0 16px;
    position: relative;
    z-index: 1;
}

/* ── الشعار والوصف ── */
.ft-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.ft-logo-wrap {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #002D72, #0051cc);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(0,45,114,.4);
}
.ft-logo-icon { font-size: 22px; color: #fff; }
.ft-brand-name {
    font-size: 1.1rem; font-weight: 900; color: #fff; line-height: 1.2;
}
.ft-brand-sub {
    font-size: .75rem; color: rgba(255,255,255,.45); letter-spacing: .5px;
}

.ft-about {
    color: rgba(255,255,255,.6);
    font-size: .85rem;
    line-height: 1.7;
    margin-bottom: 14px;
}

/* شارات الاعتماد */
.ft-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 50px;
    font-size: .75rem;
    font-weight: 700;
    background: rgba(0,163,224,.12);
    color: #7dd3fc;
    border: 1px solid rgba(0,163,224,.2);
}

/* ── عناوين الأعمدة ── */
.ft-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ft-col-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #00A3E0;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(0,163,224,.6);
}

/* ── الروابط ── */
.ft-links {
    list-style: none;
    padding: 0; margin: 0;
}
.ft-links li { margin-bottom: 7px; }
.ft-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-size: .88rem;
    transition: all .22s;
}
.ft-links a i { font-size: .65rem; color: #00A3E0; transition: transform .22s; }
.ft-links a:hover { color: #00A3E0; }
.ft-links a:hover i { transform: translateX(-4px); }

/* ── بطاقات التواصل ── */
.ft-contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: all .25s;
}
.ft-contact-card:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    transform: translateX(-4px);
}
.ft-contact-icon {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ft-contact-label {
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    margin-bottom: 3px;
}
.ft-contact-value {
    font-weight: 800;
    font-size: .92rem;
    color: #fff;
}

/* ── الشريط السفلي ── */
.ft-bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 13px 0;
    position: relative;
    z-index: 1;
}
.ft-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.ft-copy {
    font-size: .82rem;
    color: rgba(255,255,255,.35);
}
.ft-bottom-links {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ft-bottom-links a {
    font-size: .8rem;
    color: rgba(255,255,255,.4);
    text-decoration: none;
    transition: color .2s;
}
.ft-bottom-links a:hover { color: #00A3E0; }
.ft-sep { color: rgba(255,255,255,.15); font-size: .75rem; }

/* ── داكن ── */
html.dark-mode .ft { background: #010912; }

/* ── موبايل ── */
@media (max-width: 768px) {
    .ft-top-inner { justify-content: center; }
    .ft-main { padding: 18px 0 12px; }
    .ft-bottom-inner { flex-direction: column; text-align: center; }
    .ft-contact-card:hover { transform: none; }
}




/* ══════════════════════════════════════════════════
   قسم الخريطة التفاعلية — full-bleed
══════════════════════════════════════════════════ */

.interactive-map-section {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden;
    background: #001a4a;
}

/* الـ iframe يملأ القسم بالكامل */
.map-full-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1;
    display: block;
    pointer-events: none; /* الـ overlay يتحكم — يتغير لـ auto عند النقر */
}

/* overlay التفاعل: يغطي الخريطة ويمسك عجلة الماوس */
.map-interact-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    cursor: pointer;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .3s ease;
}
.map-interact-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.map-interact-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 29, 78, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    padding: 12px 26px;
    border-radius: 50px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}
.map-interact-overlay:hover .map-interact-hint {
    opacity: 1;
    transform: translateY(0);
}

/* شريط العنوان العلوي — overlay فوق كل شيء */
.map-top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    background: linear-gradient(
        to bottom,
        rgba(0, 29, 78, 0.90) 0%,
        rgba(0, 29, 78, 0.60) 60%,
        transparent 100%
    );
    padding-top: 108px; /* ارتفاع الهيدر الثابت */
    padding-bottom: 50px;
    padding-left: 40px;
    padding-right: 40px;
    pointer-events: none;
}

.map-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    pointer-events: auto;
}

/* معلومات العنوان */
.map-top-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.map-top-icon {
    width: 50px; height: 50px;
    border-radius: 14px;
    background: rgba(30, 154, 215, 0.25);
    border: 1px solid rgba(30, 154, 215, 0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    color: #7dd3fc;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
}

.map-top-text h4 {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 3px;
    text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

.map-top-text p {
    font-size: .82rem;
    color: rgba(255,255,255,.65);
    margin: 0;
}

/* زر الشاشة الكاملة */
.map-fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 154, 215, 0.2);
    border: 1.5px solid rgba(30, 154, 215, 0.6);
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: background .25s, border-color .25s, transform .2s;
    white-space: nowrap;
}

.map-fs-btn:hover {
    background: rgba(30, 154, 215, 0.45);
    border-color: #1E9AD7;
    color: #fff;
    transform: translateY(-2px);
}

.map-fs-btn i { font-size: .8rem; }

/* جوال */
@media (max-width: 768px) {
    .map-top-bar {
        padding-top: 82px; /* 76px هيدر + 6px مسافة */
        padding-bottom: 40px;
        padding-left: 18px;
        padding-right: 18px;
    }
    .map-top-text h4 { font-size: 1rem; }
    .map-top-text p { display: none; }
    .map-fs-btn span { display: none; }
    .map-fs-btn { padding: 9px 14px; border-radius: 50%; }
}

@media (max-width: 992px) {
    .care-models-wrapper {
        flex-direction: column;
        height: auto;
        gap: 20px;
    }

    .model-card {
        height: 350px !important; /* زيادة الارتفاع للجوال */
        flex: none;
        width: 100%;
    }

    .model-title {
        font-size: 1.3rem !important;
        white-space: normal !important; /* السماح للنص بالنزول لسطر جديد */
    }

    .model-description {
        max-height: none !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@media (max-width: 768px) {
    .modern-footer {
        padding-top: 60px;
        clip-path: ellipse(150% 100% at 50% 100%); /* تقليل حدة الانحناء للجوال */
        margin-top: 0;
    }

    .contact-item {
        justify-content: center; /* توسيط عناصر التواصل في الجوال */
    }
}

@media (max-width: 768px) {
    .action-btn {
        padding: 10px 25px;
        font-size: 0.85rem;
    }

    /* إصلاح تداخل الكلام في السلايدر */
    .modern-news-card .news-body h5 {
        height: auto;
        -webkit-line-clamp: 3;
    }
}

/* إصلاح اختفاء الأيقونات في الخدمات */
.icon-wrapper i {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
}




/* ════════════════════════════════════════════════════════
   HERO PRO — Modern Unique Glass Design
   ════════════════════════════════════════════════════════ */

/* ━━━ Keyframe Animations ━━━ */
@keyframes heroPulse   { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes heroRingPulse {
    0%,100% { transform:translateY(-50%) scale(1);   opacity:.55; }
    50%     { transform:translateY(-50%) scale(1.04); opacity:1;   }
}
@keyframes heroOrbFloat {
    from { transform:translateY(0) translateX(0);    }
    to   { transform:translateY(-28px) translateX(12px); }
}
@keyframes heroSweep {
    0%   { transform:translateX(-130%) skewX(-18deg); opacity:0; }
    6%   { opacity:.9; }
    52%  { opacity:0; }
    100% { transform:translateX(320%)  skewX(-18deg); opacity:0; }
}
@keyframes heroCircleGlow {
    0%,100% { box-shadow:0 0 0 20px rgba(0,200,255,.06),0 0 0 45px rgba(0,200,255,.03),0 0 80px rgba(0,160,255,.12); }
    50%     { box-shadow:0 0 0 30px rgba(0,200,255,.09),0 0 0 65px rgba(0,200,255,.05),0 0 100px rgba(0,160,255,.18); }
}
@keyframes hFloatAnim {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-9px); }
}
@keyframes heroOrbitSpin {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}
@keyframes heroCountUp {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ━━━ HERO WRAPPER ━━━ */
.hero-pro {
    position: relative;
    min-height: 100vh;
    background:
        /* Mesh light sources */
        radial-gradient(ellipse at 72% 8%,  rgba(0,220,255,.28) 0%, transparent 44%),
        radial-gradient(ellipse at 8%  85%, rgba(0,45,180,.42)  0%, transparent 50%),
        radial-gradient(ellipse at 45% 55%, rgba(0,80,160,.18)  0%, transparent 65%),
        /* Main deep navy */
        linear-gradient(145deg, #000d32 0%, #001f6b 48%, #003d99 100%),
        /* Subtle building image */
        url('img/hosmain.gif') center/cover no-repeat;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 100px;
    padding-bottom: 50px;
    box-sizing: border-box;
    z-index: 1;
    overflow: hidden;
}

/* Glass diagonal sheen */
.hero-pro::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg,
        rgba(255,255,255,.09) 0%,
        rgba(255,255,255,.03) 30%,
        transparent 55%,
        rgba(0,200,255,.05) 100%);
    z-index: 1; pointer-events: none;
}
/* Light sweep animation */
.hero-pro::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 32%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    transform: skewX(-18deg);
    animation: heroSweep 16s cubic-bezier(.4,0,.6,1) infinite;
    animation-delay: 5s;
    z-index: 2; pointer-events: none;
}

/* ── Overlay: multi-layer lighting ── */
.hero-overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 90% 5%,  rgba(160,235,255,.24) 0%, transparent 38%),
        radial-gradient(ellipse at 12% 92%, rgba(0,60,200,.30)     0%, transparent 45%),
        linear-gradient(0deg, rgba(0,5,28,.50) 0%, transparent 55%);
    z-index: 3; pointer-events: none;
}

/* ━━━ DECORATIVE ELEMENTS ━━━ */
.hero-deco {
    position: absolute; inset: 0;
    overflow: hidden; pointer-events: none; z-index: 1;
}

/* Concentric rings */
.hero-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%; left: -14%;
    transform: translateY(-50%);
}
.hero-ring-1 {
    width: 680px; height: 680px;
    border: 1.5px solid rgba(0,200,255,.11);
    box-shadow: 0 0 70px rgba(0,180,255,.06) inset;
    animation: heroRingPulse 9s ease-in-out infinite;
}
.hero-ring-2 {
    width: 490px; height: 490px;
    border: 1px solid rgba(0,180,255,.08);
    animation: heroRingPulse 9s ease-in-out infinite;
    animation-delay: -4.5s;
}
.hero-ring-3 {
    width: 310px; height: 310px;
    border: 1px solid rgba(0,160,255,.12);
    animation: heroRingPulse 9s ease-in-out infinite;
    animation-delay: -2s;
}

/* Soft glow orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(55px);
    pointer-events: none;
}
.hero-orb-1 {
    width: 380px; height: 380px;
    top: -90px; left: 18%;
    background: radial-gradient(circle, rgba(0,200,255,.18) 0%, transparent 70%);
    animation: heroOrbFloat 13s ease-in-out infinite alternate;
}
.hero-orb-2 {
    width: 300px; height: 300px;
    bottom: 40px; right: 12%;
    background: radial-gradient(circle, rgba(0,80,220,.22) 0%, transparent 70%);
    animation: heroOrbFloat 10s ease-in-out infinite alternate-reverse;
}
.hero-orb-3 {
    width: 220px; height: 220px;
    top: 38%; left: 40%;
    background: radial-gradient(circle, rgba(0,160,255,.10) 0%, transparent 70%);
    animation: heroOrbFloat 15s ease-in-out infinite alternate;
    animation-delay: -7s;
}

/* Dot grid */
.hero-grid-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 34px 34px;
}

/* ━━━ CONTENT LAYOUT ━━━ */
.hero-content {
    position: relative; z-index: 5;
    width: 100%; flex: 1;
    display: flex; align-items: center;
}

/* ================================================
   HERO QUICK NAV — الكروت في أسفل الهيرو مباشرة
   ================================================ */
.hero-quick-nav {
    position: relative;
    z-index: 30;
    padding: 0 0 0 0;
    margin-top: 0;
}

/* الكرت — زجاجي فاخر */
.quick-card {
    background: rgba(255,255,255,0.09);
    backdrop-filter: blur(22px) saturate(1.9);
    -webkit-backdrop-filter: blur(22px) saturate(1.9);
    border-radius: 18px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.07);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255,255,255,0.22);
    height: 100%;
}
/* طبقة لمعان علوية */
.quick-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, transparent 100%);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
    z-index: 1;
}

/* صندوق الأيقونة الواضحة */
.qc-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
    transition: all 0.35s ease;
    position: relative;
    z-index: 2;
}

/* نص الكرت */
.qc-body { flex: 1; text-align: right; position: relative; z-index: 2; }
.qc-title {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 4px 0;
    transition: color 0.3s;
}
.qc-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

/* السهم */
.qc-arrow {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.35s ease;
    position: relative; z-index: 2;
}

/* Hover */
.quick-card:hover {
    transform: translateY(-7px);
    background: rgba(255,255,255,0.17);
    box-shadow:
        0 22px 55px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 0 30px rgba(0,180,255,0.12);
    border-color: rgba(255,255,255,0.42);
}
.quick-card:hover .qc-icon-box {
    background: linear-gradient(135deg, #22d3f5, #00A3E0);
    border-color: rgba(255,255,255,0.35);
    box-shadow: 0 6px 22px rgba(0,163,224,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
    transform: scale(1.10) rotate(-5deg);
}
.quick-card:hover .qc-arrow {
    background: linear-gradient(135deg, #22d3f5, #00A3E0);
    box-shadow: 0 4px 14px rgba(0,163,224,0.45);
}

/* خط أبيض سفلي */
.quick-card::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3), #00A3E0);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s ease;
    border-radius: 0 0 18px 18px;
}
.quick-card:hover::after { transform: scaleX(1); }

/* ===== z-index للقسم الذي يلي الكروت — مُدمج في .featured-wrapper-section أعلاه ===== */

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .hero-pro { padding-top: 90px; padding-bottom: 40px; }
}
@media (max-width: 576px) {
    .hero-pro { padding-top: 80px; padding-bottom: 30px; }
    .quick-card { padding: 16px 12px; }
    .qc-bg-icon { font-size: 3.5rem; }
}


/* ━━━ HERO TEXT BLOCK ━━━ */
.hero-text {
    text-align: right;
    padding-bottom: 10px;
    position: relative; z-index: 4;
}

/* ── Badge نابض ── */
.hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    padding: 9px 20px 9px 16px;
    border-radius: 50px;
    font-size: .82rem; font-weight: 700;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 20px rgba(0,0,0,.14);
    letter-spacing: .3px;
}
.hero-badge-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: #2effee;
    box-shadow: 0 0 0 3px rgba(46,255,238,.25), 0 0 12px rgba(46,255,238,.6);
    flex-shrink: 0;
    animation: heroPulse 2.2s ease-in-out infinite;
}

/* ── Headline ── */
.hero-text h1 {
    font-size: 3.2rem; font-weight: 900;
    line-height: 1.22; margin-bottom: 18px;
    text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.hero-h1-accent {
    background: linear-gradient(110deg, #a0f4ff 0%, #38d2f5 45%, #0ec0f0 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 22px rgba(56,210,245,.55));
}
.hero-h1-white { color: #fff; }

.hero-text p {
    font-size: 1.05rem; line-height: 1.85;
    color: rgba(255,255,255,.82); margin-bottom: 30px;
    max-width: 520px;
}

/* ── Buttons ── */
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 32px; }

.btn-hero {
    padding: 13px 30px; border-radius: 50px;
    font-weight: 800; text-decoration: none; font-size: .96rem;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-hero::before {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    transition: left .45s ease; pointer-events: none;
}
.btn-hero:hover::before { left: 160%; }

.btn-hero.primary {
    background: linear-gradient(135deg, #1ee0ff 0%, #00a8e8 55%, #0070bf 100%);
    color: #fff; border: 1px solid rgba(255,255,255,.26);
    box-shadow: 0 6px 28px rgba(0,163,224,.55), inset 0 1px 0 rgba(255,255,255,.30);
}
.btn-hero.primary:hover {
    background: linear-gradient(135deg, #fff 0%, #e8f9ff 100%);
    color: #00256e; transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(0,163,224,.38);
}
.btn-hero.outline {
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255,255,255,.48); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 16px rgba(0,0,0,.12);
}
.btn-hero.outline:hover {
    background: rgba(255,255,255,.96);
    color: #002D72; border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* ━━━ STATS BAR ━━━ */
.hero-stats {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px; padding: 14px 24px;
    gap: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 24px rgba(0,0,0,.12);
    animation: heroCountUp .8s ease both;
    animation-delay: .6s;
}
.hstat {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 22px;
}
.hstat-num {
    font-size: 1.55rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, #a0f4ff, #38d2f5);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 14px rgba(56,210,245,.45));
}
.hstat-lbl {
    font-size: .7rem; color: rgba(255,255,255,.58);
    font-weight: 600; margin-top: 4px; white-space: nowrap;
}
.hstat-div {
    width: 1px; height: 38px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.20), transparent);
    flex-shrink: 0;
}

/* ━━━ HERO VISUAL (Desktop right column) ━━━ */
.hero-visual {
    position: relative; width: 380px; height: 380px;
    display: flex; align-items: center; justify-content: center;
}

/* Outer glow ring */
.hv-glow-ring {
    position: absolute;
    width: 380px; height: 380px; border-radius: 50%;
    border: 1px solid rgba(0,200,255,.18);
    box-shadow:
        0 0 60px rgba(0,180,255,.12),
        inset 0 0 60px rgba(0,180,255,.06);
    animation: heroCircleGlow 6s ease-in-out infinite;
}

/* Main glass circle */
.hv-circle {
    width: 260px; height: 260px; border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1.5px solid rgba(255,255,255,.22);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.22),
        inset 0 -2px 0 rgba(0,180,255,.08),
        0 30px 80px rgba(0,0,0,.30);
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
    animation: heroCircleGlow 6s ease-in-out infinite;
}
/* Inner shine */
.hv-circle-shine {
    position: absolute; top: 6%; left: 14%; right: 14%;
    height: 44%;
    background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 100%);
    border-radius: 50% 50% 0 0 / 60% 60% 0 0;
    pointer-events: none;
}
.hv-inner {
    font-size: 5.5rem;
    color: rgba(255,255,255,.90);
    filter: drop-shadow(0 0 24px rgba(0,210,255,.65));
    z-index: 3;
    display: flex; align-items: center; justify-content: center;
}
.hv-population-svg {
    width: 86%; height: auto;
    filter: drop-shadow(0 0 18px rgba(0,210,255,.7));
}

/* ── حلقة المدار ── */
.hv-orbit {
    position: absolute;
    width: 340px; height: 340px; border-radius: 50%;
    border: 1px dashed rgba(0,200,255,.16);
    animation: heroOrbitSpin 20s linear infinite;
    pointer-events: none;
}

/* ── أيقونة طبية تدور على الحلقة ── */
.hv-orbit-icon {
    position: absolute;
    top: -20px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,15,50,.88);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(46,255,238,.60);
    box-shadow:
        0 0 0 4px rgba(46,255,238,.10),
        0 0 18px 5px rgba(46,255,238,.35),
        inset 0 1px 0 rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    color: #2effee; font-size: .92rem;
    transition: opacity .35s ease, transform .35s ease;
}
/* نقطة توهج خلف الأيقونة */
.hv-orbit-icon::after {
    content: '';
    position: absolute; inset: -6px; border-radius: 50%;
    background: radial-gradient(circle, rgba(46,255,238,.22) 0%, transparent 70%);
    pointer-events: none;
}
/* حالة التبديل */
.hv-orbit-icon.changing {
    opacity: 0;
    transform: translateX(-50%) scale(.65) rotate(90deg);
}
.hv-orbit-icon.entering {
    animation: hvIconEnter .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes hvIconEnter {
    from { opacity:0; transform:translateX(-50%) scale(.5) rotate(-90deg); }
    to   { opacity:1; transform:translateX(-50%) scale(1)  rotate(0deg);  }
}

/* ━━━ HERO ESCALATOR ━━━ */

/* ━━━ HERO ESCALATOR ━━━ */

/* عمود الحاوية — جوال */
@media (max-width: 991px) {
    .hero-escalator-col {
        order: 3;
        margin-top: 28px;
        padding: 0;
    }
}

/* الحاوية — ديسكتوب */
.hero-escalator {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 260px;
    height: auto;
    overflow: visible;
    margin-right: auto;
    margin-left: 16px;
}

/* الحاوية — جوال */
@media (max-width: 991px) {
    .hero-escalator {
        width: 300px;
        height: 58px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        display: block;
        flex-direction: unset;
        gap: unset;
    }
}

/* ── كل بطاقة (JS يتحكم بالحركة) ── */
.esc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
    white-space: nowrap;
    min-height: 60px;
    width: 100%;
    flex-shrink: 0;
    transform-origin: center;
    opacity: 0;
}

/* جوال: بدون بوكس — slider عادي */
@media (max-width: 991px) {
    .esc-card {
        position: relative !important;
        width: 100% !important;
        height: 58px !important;
        min-height: unset;
        padding: 0 12px;
        border-radius: 12px;
        justify-content: center;
        gap: 10px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.14);
        box-shadow: 0 4px 16px rgba(0,0,0,.25);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transform: translateX(300px);
        opacity: 0;
        transform-origin: center;
    }
}

/* أيقونة الكرت */
.esc-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}

/* جوال: أيقونة أكبر */
@media (max-width: 991px) {
    .esc-icon {
        width: 40px; height: 40px;
        border-radius: 12px;
        font-size: 1.1rem;
    }
}

/* نص الكرت */
.esc-label {
    font-size: .84rem; font-weight: 700;
    color: rgba(255,255,255,.92);
    font-family: 'Cairo', sans-serif;
    letter-spacing: .2px;
}

@media (max-width: 991px) {
    .esc-label {
        font-size: 1rem;
        color: #fff;
        text-shadow: 0 1px 8px rgba(0,0,0,.5);
    }
}

/* Floating mini cards */
.hv-float {
    position: absolute;
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px; padding: 10px 16px;
    color: #fff; font-size: .8rem; font-weight: 700;
    white-space: nowrap; z-index: 5;
    box-shadow:
        0 8px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.22);
}
.hv-float-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(0,200,255,.22);
    display: flex; align-items: center; justify-content: center;
    color: #2effee; font-size: .85rem; flex-shrink: 0;
}
.hv-float-1 { top: 20px;  right: -25px; animation: hFloatAnim 4s ease-in-out infinite; }
.hv-float-2 { bottom: 70px; left: -30px; animation: hFloatAnim 5s ease-in-out infinite; animation-delay: -2s; }
.hv-float-3 { bottom: 15px; right: 10px; animation: hFloatAnim 4.5s ease-in-out infinite; animation-delay: -1s; }

/* ━━━ QUICK NAV CARDS ━━━ */
.hero-quick-nav {
    position: relative; z-index: 30; padding: 0; margin-top: 0;
}

/* الكرت — زجاجي فاخر */
.quick-card {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(22px) saturate(1.8);
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    border-radius: 18px; padding: 20px 18px;
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: #fff;
    position: relative; overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 -1px 0 rgba(0,0,0,.08);
    transition: all .35s cubic-bezier(.4,0,.2,1);
    border: 1px solid rgba(255,255,255,.18);
    height: 100%;
}
.quick-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 100%);
    border-radius: 18px 18px 0 0;
    pointer-events: none; z-index: 1;
}
.quick-card::after {
    content: '';
    position: absolute; bottom: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00d4ff, #0080ff);
    transform: scaleX(0); transform-origin: right;
    transition: transform .38s ease;
    border-radius: 0 0 18px 18px;
}
.quick-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.35); box-shadow: 0 20px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.30), 0 0 30px rgba(0,180,255,.10); }
.quick-card:hover::after { transform: scaleX(1); }
.quick-card:hover .qc-icon-box { background: linear-gradient(135deg,#1ee0ff,#0095d0); border-color: rgba(255,255,255,.3); box-shadow: 0 6px 20px rgba(0,163,224,.50); transform: scale(1.10) rotate(-5deg); }
.quick-card:hover .qc-arrow   { background: linear-gradient(135deg,#1ee0ff,#0095d0); box-shadow: 0 4px 14px rgba(0,163,224,.45); }

.qc-icon-box {
    width: 50px; height: 50px; border-radius: 14px;
    background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.28);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff; flex-shrink: 0;
    transition: all .35s ease; position: relative; z-index: 2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.qc-body { flex: 1; text-align: right; position: relative; z-index: 2; }
.qc-title { font-size: .95rem; font-weight: 800; color: #fff; margin: 0 0 3px 0; }
.qc-sub { font-size: .78rem; color: rgba(255,255,255,.68); margin: 0; }
.qc-arrow {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .82rem; flex-shrink: 0;
    transition: all .35s ease; position: relative; z-index: 2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* ━━━ RESPONSIVE ━━━ */
@media (max-width: 991px) {
    .hero-pro { padding-top: 90px; padding-bottom: 40px; }
}
@media (max-width: 768px) {
    /* ── النص ── */
    .hero-text { text-align: center; margin: auto; }
    .hero-text h1 { font-size: 2.1rem; }
    .hero-text p { margin: 0 auto 20px; font-size: .93rem; }

    /* ── إخفاء الأزرار والإحصائيات في الجوال ── */
    .hero-actions { display: none !important; }
    .hero-stats   { display: none !important; }

    /* ── العنصر البصري — يظهر تحت النص بحجم مناسب ── */
    .hero-visual-col {
        padding-top: 10px;
        padding-bottom: 4px;
    }
    .hero-visual {
        width: 250px; height: 250px;
        margin: 0 auto;
    }
    .hv-glow-ring {
        width: 250px; height: 250px;
    }
    .hv-circle {
        width: 168px; height: 168px;
    }
    .hv-inner { font-size: 3.6rem; }

    /* اقطع أي عناصر تطلع خارج الكولم */
    .hero-visual-col { overflow: hidden; }

    /* البطاقات العائمة — أصغر وأقرب للدائرة */
    .hv-float {
        font-size: .70rem;
        padding: 7px 11px;
        gap: 6px;
        border-radius: 10px;
    }
    .hv-float-icon {
        width: 22px; height: 22px;
        font-size: .72rem;
        border-radius: 6px;
    }
    .hv-float-1 { top: 8px;    right: -18px; }
    .hv-float-2 { bottom: 42px; left: -18px; }
    .hv-float-3 { bottom: 4px;  right: 6px;  }

    .quick-card { padding: 14px 12px; }
}
@media (max-width: 480px) {
    .hero-pro { padding-top: 80px; padding-bottom: 20px; }
    .hero-text h1 { font-size: 1.85rem; }
    .hero-visual { width: 210px; height: 210px; }
    .hv-glow-ring { width: 210px; height: 210px; }
    .hv-circle    { width: 142px; height: 142px; }
    .hv-inner     { font-size: 3rem; }
    .hv-orbit     { width: 186px; height: 186px; }
    .hv-float-3   { bottom: 2px; right: 4px; font-size: .65rem; padding: 6px 9px; }
}

/* legacy (unused but keep for safety) */
.hero-cut { display: none !important; }
.hero-floating-cards { display: none !important; }

/* ══════════════════════════════════════════════════
   ضبط السكشنات على الجوال — padding وأحجام المحتوى
══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* الأخبار المميزة */
    .featured-wrapper-section { padding-bottom: 20px !important; }

    /* الخدمات الإلكترونية */
    .services-modern-section { padding-bottom: 24px !important; }
    .services-modern-section .section-title-modern { font-size: 1.6rem; }
    .services-modern-section > .container > .text-center.mb-4 { margin-bottom: 20px !important; }

    /* نماذج الرعاية */
    .care-models-section { padding-bottom: 24px !important; }
    .care-models-section .section-header.mb-4 { margin-bottom: 16px !important; }
    .care-models-section h2 { font-size: 1.5rem !important; }

    /* الأخبار */
    .news-section { padding: 0 0 20px !important; }
    .news-section h2 { font-size: 1.4rem !important; }
    .news-swiper { padding: 12px 8px 40px !important; }
    .img-container { height: 160px !important; }
    .news-body { padding: 8px 14px 16px !important; }
    .news-body h5 { font-size: .95rem !important; height: 2.8rem !important; }
    .news-body p { display: none !important; }  /* إخفاء الملخص على الجوال لتوفير المساحة */

    /* الفعاليات */
    .events-slider-section { padding: 0 0 30px !important; }

    /* المنشآت */
    .ht-section { padding-top: 0 !important; }

    /* الاعتمادات */
    .ac-section { padding-top: 0 !important; }

    /* الفوتر */
    .ft { padding-top: 0 !important; }
    .ft-main { padding: 20px 0 16px !important; }
    .ft-top-bar { padding: 16px 0 !important; }
}